<template>
  <div>
       <van-nav-bar
          title="个人中心"
          left-text="返回"
          right-text="按钮"
          left-arrow
      />
      <div class="user_wrap" v-if="loginFlag">
        <img src="../../assets/logo.png" alt="">
        <div>
          <h2>{{userInfo.userName}}</h2>
          <div>
            <span>学习时长：0</span>&nbsp;&nbsp;
            <span>经验：0</span>
          </div>
        </div>
      </div>
    <div class="user_wrap" v-if="!loginFlag" @click="turnLogin">
        <img src="https://img1.baidu.com/it/u=3703149957,3046002560&fm=253&fmt=auto&app=138&f=JPEG?w=320&h=320" alt="">
        <div>
          <h2>未登录</h2>
          <div>
            <span>学习时长：0</span>&nbsp;&nbsp;
            <span>经验：0</span>
          </div>
        </div>
      </div>
      <!--  -->
      <div class="cell_wrap">
          <van-cell-group >
              <van-cell title="我的课程" is-link icon="shop-o"> </van-cell>
              <van-cell title="我的收藏" is-link icon="shop-o"> </van-cell>
              <van-cell title="我的订单" is-link icon="shop-o"> </van-cell>
        </van-cell-group>
        <van-cell-group >
              <van-cell title="我的余额" is-link icon="shop-o"> </van-cell>
              <van-cell title="常见问题" is-link icon="shop-o"> </van-cell>
              <van-cell title="设置" is-link icon="shop-o"> </van-cell>
        </van-cell-group>
             <van-button block type="primary" @click="quit">退出登录</van-button>
     </div>

  </div>
</template>
<script>
import {isLogin,getUserinfo,quitApi} from '../../api/com'
export default {
  data(){
    return{
      userInfo:{},
      loginFlag:localStorage.userName
    }
  },
  created() {
    this.getUser();
  },
  methods: {
    turnLogin(){
      this.$router.push("/login")
    },
    // 退出登录
    async quit(){
        if(localStorage.userName){
            var res=await quitApi(localStorage.userName) 
          console.log(res)
            localStorage.userName="";//清空localStorage的用户名
            this.loginFlag=""
        }else{
          this.$message.success("尚未登录，不能退出")
        }
    },
    async getUser(){
      // 判断是否登录
        var isLoginFlag= await  isLogin(localStorage.userName)
        console.log(isLoginFlag)
          // 获取用户信息
          var res=await getUserinfo(localStorage.userName);
          console.log(res)
          this.userInfo=res;
          //存储用户id到localStorage
          localStorage.tokenId=res.tokenId;
        
    }
  },  
}
</script>
<style lang="less">
.cell_wrap{
  width: 90%;
  margin: 0 auto;
  .van-cell-group{
    margin: 15px 0;
  }
}
  .user_wrap{
    width: 100%;
    height: 100px;
    padding: 0 40px;
    box-sizing: border-box;
    display: flex;
    line-height: 50px;
    background: white;
    img{
      width:80px;
      height: 80px;
      border-radius:50%;
      margin-right: 20px;
    }
  }
</style>